<template>
	<view class="sleeppage">
		<view class="tabline">
			<view class="itemtab" :class="tab==1?'act':''" @click="selecttab(1)">
				日
				<view class="line"></view>
			</view>
			<view class="itemtab" :class="tab==2?'act':''" @click="selecttab(2)">
				周
				<view class="line"></view>
			</view>
			<view class="itemtab" :class="tab==3?'act':''" @click="selecttab(3)">
				月
				<view class="line"></view>
			</view>
			<view class="itemtab" :class="tab==4?'act':''" @click="selecttab(4)">
				年
				<view class="line"></view>
			</view>
		</view>
		<view class="daybox">
			<view class="dayline">
				<view class="day">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="day">{{date}}
							<view class="weekday">
								周三
							</view>
							<view class="iconfont icon-xiangxia1">
								
							</view>
							</view>
					</picker>
				</view>
				
			</view>
			<view class="timeline">
				02:05-03:45
			</view>
			<view class="timetitle">
				深睡 <view class="num">100</view>分钟
			</view>
		</view>
		
		<view class="chartbox">
			
		</view>
		<view class="banner">
			<view class="itembanner">
				<view class="iconfont icon-qingdan">
					
				</view>
				<view class="title">
					记录睡眠
				</view>
			</view>
			<view class="itembanner">
				<view class="iconfont icon-qingdan">
					
				</view>
				<view class="title">
					高效午休
				</view>
			</view>
			<view class="itembanner">
				<view class="iconfont icon-qingdan">
					
				</view>
				<view class="title">
					手动输入
				</view>
			</view>
		</view>
		<view class="centerlin">
			<view class="title">
			 失眠分析与建议
			</view>
			<view class="label">
				助眠音乐
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab:1,
				date:'9月28日'
			}
		},
		methods: {
		selecttab(e){
			this.tab=e
		},	
		bindDateChange(e){
			this.date=e.detail.value
		},
		}
	}
</script>

<style lang="less">
  .sleeppage{
	  width: 750rpx;
	  box-sizing: border-box;
	  background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(242,248,255,1) 100%);
	  padding-bottom: 200rpx;
	  .tabline{
		  width: 80%;
		  margin: auto;
		  display: flex;
		  align-items: center;
		  justify-content: space-evenly;
		  .itemtab{
			  width: 36rpx;
			  font-size: 34rpx;
			  font-weight: bold;
			  .line{
				  width: 36rpx;
				  height: 6rpx;
				  margin-top: 16rpx;
			  }
		  }
		  .act{
			  color: #1a4f8a;
			  .line{
				  background: #1a4f8a;
			  }
		  }
	  }
	  .daybox{
		  width: 60%;
		  line-height: 2.2;
		  margin: 20rpx auto;
		  text-align: center;
		  .dayline{
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  .day{
				  display: flex;
				  align-items: center;
				  justify-content: center;
				  font-size: 34rpx;
				  font-weight: bold;
			  }
		  }
		  .timetitle{
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  .num{
				  font-weight: bold;
				  font-size: 34rpx;
			  }
		  }
	  }
	  .banner{
		  width: 100%;
		  display: flex;
		  align-items: center;
		  justify-content: space-evenly;
		  .itembanner{
			  width: 28%;
			  background-color: white;
			  border-radius: 20rpx;
			  margin: 2.5%;
			  display: flex;
			  align-items: center;
			  box-sizing: border-box;
			  padding: 20rpx;
			  .iconfont{
				  color: #1a4f8a;
				  font-size: 50rpx;
				  margin-right: 20rpx;
			  }
			  .title{
				  font-size: 38rpx;
				  font-weight: bold;
			  }
			  
		  }
	  }
	  .centerlin{
		  width: 94%;
		  margin: auto;
		  background-color: white;
		  box-sizing: border-box;
		  padding: 4rpx;
		  border-radius: 50rpx;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  box-sizing: border-box;
		  .title{
			  height: 100%;
			  border-radius: 30rpx;
			  background-color: skyblue;
			  color: #1a4f8a;
			  font-weight: bold;
			  font-size: 38rpx;
			  padding: 4rpx 8rpx;
		  }
		  .label{
			  font-size: 38rpx;
			  font-weight: bold;
			  margin-right: 50rpx;
			  color: gray;
		  }
	  }
  }
</style>
